<script setup>
import {onMounted, ref} from 'vue'
import { getGradeOptions,getCurrentStudentGrade } from '../../../api/grade.js'

const grades = ref([
])

const semesterOptions = ref([])

const currentSemester = ref()

const searchForm = ref({
  courseName: '',
  semester: ''
})

const pagination = ref({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

const getOptions = async () => {
  const res = await getGradeOptions()
  semesterOptions.value = res.semesterOptions;
}

const getGrades = async () => {
  const listRes = await getCurrentStudentGrade({
    courseName: searchForm.value.courseName,
    semester: searchForm.value.semester,
    // page: pagination.value.currentPage,
    // pageSize: pagination.value.pageSize
  });
  grades.value = listRes;
  // pagination.value.total = listRes.total;
}

const handlePageChange = (page) => {
  pagination.value.currentPage = page;
  getGrades();
}

const handleSizeChange = (size) => {
  pagination.value.pageSize = size;
  pagination.value.currentPage = 1;
  getGrades();
}

onMounted(() => {
  getOptions()
  getGrades();
})

</script>

<template>
  <div class="grades-container">
    <el-card class="search-card">
      <div class="search-form">
        <div class="search-item">
          <span class="label">课程名称：</span>
          <el-input
            v-model="searchForm.courseName"
            placeholder="请输入课程名称"
            clearable
            @clear="getGrades"
            style="width: 220px"
          />
        </div>
        <div class="search-item">
          <span class="label">学期：</span>
          <el-select 
            v-model="searchForm.semester" 
            placeholder="选择学期"
            clearable
            @change="getGrades"
            style="width: 220px"
          >
            <el-option
              v-for="item in semesterOptions"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </div>
        <div class="search-buttons">
          <el-button type="primary" @click="getGrades">查询</el-button>
          <el-button @click="searchForm = {courseName: '', semester: ''}">重置</el-button>
        </div>
      </div>
    </el-card>

    <el-card class="table-card">
      <el-table :data="grades" border style="width: 100%">
        <el-table-column prop="courseName" label="课程名称" width="200" />
        <el-table-column prop="score" label="成绩" width="120" />
        <el-table-column prop="semester" label="学期" width="150" />
        <el-table-column prop="examType" label="考试类型" width="120" />
      </el-table>
      
<!--      <div class="pagination-container">-->
<!--        <el-pagination-->
<!--          v-model:current-page="pagination.currentPage"-->
<!--          v-model:page-size="pagination.pageSize"-->
<!--          :page-sizes="[10, 20, 50, 100]"-->
<!--          :total="pagination.total"-->
<!--          layout="total, sizes, prev, pager, next"-->
<!--          @size-change="handleSizeChange"-->
<!--          @current-change="handlePageChange"-->
<!--        />-->
<!--      </div>-->
    </el-card>
  </div>
</template>

<style scoped>
.grades-container {
  padding: 20px;
}

.search-card {
  margin-bottom: 20px;
}

.search-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  padding: 8px 0;
}

.search-item {
  display: flex;
  align-items: center;
}

.search-item .label {
  margin-right: 8px;
  white-space: nowrap;
  color: #606266;
}

.search-buttons {
  margin-left: auto;
}

.search-buttons .el-button {
  margin-left: 12px;
}

.search-buttons .el-button:first-child {
  margin-left: 0;
}

.table-card {
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
